<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<style type="text/css">
			.carItem {
                padding-top: 20px !important;
				width:200px;
				height:130px;
				text-align:center;
			}
		</style>
	</ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">Carousel - Selection</h1>
		<div class="entry">
			<p>This example demonstrates how to select an item from Carousel.</p>
		
			<h:form id="form">
				<p:carousel id="carousel" value="#{tableBean.carsSmall}" var="car" itemStyleClass="carItem" headerText="Cars">
                    <p:graphicImage id="image" value="/images/cars/#{car.manufacturer}.jpg"/> 

                    <h:panelGrid columns="1" style="width:100%" cellpadding="5">
                        <h:outputText value="Model: " /><h:outputText id="model" value="#{car.model}" />
                    </h:panelGrid>

                    <p:commandLink id="view" update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                        <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
                        <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
                    </p:commandLink>
				</p:carousel>
				
				<p:dialog id="dialog" header="Car Detail" showEffect="fade" hideEffect="fade" modal="true"
					widgetVar="carDialog">
					
					<p:outputPanel id="carDetail" style="text-align:center;" layout="block">
						<p:graphicImage id="carImage" value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
						
						<h:panelGrid  columns="2" cellpadding="5">
							<h:outputLabel for="modelNo" value="Model No: " />
							<h:outputText id="modelNo" value="#{tableBean.selectedCar.model}" />
							
							<h:outputLabel for="year" value="Year: " />
							<h:outputText id="year" value="#{tableBean.selectedCar.year}" />
							
							<h:outputLabel for="color" value="Color: " />
							<h:outputText id="color" value="#{tableBean.selectedCar.color}" />
						</h:panelGrid>
					</p:outputPanel>
					
				</p:dialog>
				
			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="carouselSelect.xhtml">
				<pre name="code" class="xml">
&lt;h:form id="form"&gt;
	&lt;p:carousel id="carousel" value="\#{tableBean.carsSmall}" var="car" itemStyleClass="carItem" headerText="Cars"&gt;
        &lt;p:graphicImage id="image" value="/images/cars/\#{car.manufacturer}.jpg"/&gt; 

        &lt;h:panelGrid columns="2" style="width:100%" cellpadding="5"&gt;
            &lt;h:outputText value="Model: " /&gt;&lt;h:outputText id="model" value="\#{car.model}" /&gt;
        &lt;/h:panelGrid&gt;

        &lt;p:commandLink id="view" update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail"&gt;
            &lt;h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" /&gt; 
            &lt;f:setPropertyActionListener value="\#{car}" 
                    target="\#{tableBean.selectedCar}" /&gt;
        &lt;/p:commandLink&gt;
	&lt;/p:carousel&gt;

	&lt;p:dialog header="Car Detail" showEffect="fade" hideEffect="fade" modal="true"
		widgetVar="carDialog"&gt;
		
		&lt;p:outputPanel id="carDetail" style="text-align:center;" layout="block"&gt;
			&lt;p:graphicImage id="carImage" value="/images/cars/\#{tableBean.selectedCar.manufacturer}.jpg"/&gt;
			
			&lt;h:panelGrid  columns="2" cellpadding="5"&gt;
				&lt;h:outputLabel for="modelNo" value="Model No: " /&gt;
				&lt;h:outputText id="modelNo" 
						value="\#{tableBean.selectedCar.model}" /&gt;
				
				&lt;h:outputLabel for="year" value="Year: " /&gt;
				&lt;h:outputText id="year" 
						value="\#{tableBean.selectedCar.year}" /&gt;
				
				&lt;h:outputLabel for="color" value="Color: " /&gt;
				&lt;h:outputText id="color" v
						alue="\#{tableBean.selectedCar.color}" 
						style="color:\#{tableBean.selectedCar.color}"/&gt;
			&lt;/h:panelGrid&gt;
		&lt;/p:outputPanel&gt;
		
	&lt;/p:dialog&gt;
	
&lt;/h:form&gt;
				</pre>
				</p:tab>
				
				<p:tab title="TableBean.java">
				<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletContext;

import org.primefaces.examples.domain.Car;

public class TableBean {

	private List&lt;Car&gt; cars;
	
	private Car selectedCar;

	public TableBean() {
		cars = new ArrayList&lt;Car&gt;();
		
		for(int i = 0 ; i &lt; 9 ; i++)
			list.add(new Car("Model_" + i, getRandomYear(), "Brand_" + i, "Color_" + i));
	}

	public Car getSelectedCar() {
		return selectedCar;
	}
	public void setSelectedCar(Car selectedCar) {
		this.selectedCar = selectedCar;
	}

	public List&lt;Car&gt; getCars() {
		return cars;
	}
}
				</pre>
				</p:tab>
			</p:tabView>
			
		</div>

	</ui:define>
</ui:composition>